<template>
  <div class="container">
    <div class="header">
      <div class="head-search">
        <div class="orientation">
          <img src="../assets/image/dinwei.png" class="dw" />
          <div class="wenzi">定位切换</div>
        </div>
        <div class="inp-box">
          <img src="../assets/image/search.png" class="suo" />
          <input
            type="text"
            value=""
            placeholder="点击输入搜索内容"
            placeholder-style="font-size:.266667rem;padding-left:.266667rem"
          />
          <span class="search">搜索</span>
        </div>
        <div class="cart-box">
          <img src="../assets/image/cart.png" />
        </div>
        <div class="news">
          <img src="../assets/image/9.png" />
        </div>
      </div>
      <div class="tab-div">
        <div
          class="row-item"
          @click="changeTab(index)"
          v-for="(item, index) in tabBars"
          :key="index"
          :id="'tab' + index"
        >
          <span
            class="font-md"
            :class="tabIndex === index ? 'text-color' : ''"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
    <div class="sift" v-if="sift">
      <div class="swiper-box">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="index">
            <div class="banner-img">
              <img :src="Config_ysy.img_url + item.image" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="navtagor">
        <div
          class="classify-box"
          v-for="(item, index) in classifyList"
          :key="index"
        >
          <img
            :src="Config_ysy.img_url + item.image[0]"
            alt=""
            class="tea-img"
          />
          <p class="tea-name">{{ item.name }}</p>
        </div>
      </div>
      <!-- 官方推荐 -->
      <div class="bach">
        <div class="title-more">
          <p class="tuijie">官方推荐</p>
          <p class="more">查看更多></p>
        </div>
      </div>
      <div class="tea-list">
        <div class="goods-tea" v-for="(item, index) in goodsList" :key="index">
          <img
            :src="Config_ysy.img_url + item.images[0]"
            alt=""
            class="goods-img"
          />
          <p class="goods-title">{{ item.title }}</p>
          <p class="section">{{ item.goods_name }}</p>
          <div class="money">￥{{ item.present_price }}</div>
        </div>
      </div>

      <!-- 限时精品 -->
      <div class="limit">
        <div class="limit-head">
          <i></i>
          <p class="jinxuan">限时精品</p>
        </div>
        <div class="limit-goods">
          <div class="limit-tea" v-for="(item, index) in teaList" :key="index">
            <img :src="Config_ysy.img_url + item.images[0]" alt="" />
          </div>
        </div>
        <div class="bj"></div>
      </div>
      <!-- 茶韵 -->
      <div class="rhyme">
        <div class="rhy-img">
          <img
            v-for="(item, index) in onlys"
            :key="index"
            :src="Config_ysy.img_url + item.image"
            alt=""
          />
        </div>
        <div class="detail" v-for="(item, index) in detailList" :key="index">
          <div class="left">
            <p class="left-title">{{ item.goods_name }}</p>
            <p class="left-money">￥{{ item.present_price }}</p>
            <p class="left-section">{{ item.sections }}</p>
          </div>
          <div class="right">
            <img :src="Config_ysy.img_url + item.images[0]" alt="" />
          </div>
        </div>
      </div>
      <div class="tea-detail" v-for="(item, index) in articleList" :key="index">
        <div class="first">
          <div class="first-left">
            <img :src="Config_ysy.img_url + item.a_image" alt="" />
          </div>
          <div class="first-right">
            <div class="right-top">
              <img :src="Config_ysy.img_url + item.b_image" alt="" />
              <img :src="Config_ysy.img_url + item.c_image" alt="" class="de" />
            </div>
            <div class="right-bottom">
              <img :src="Config_ysy.img_url + item.d_image" alt="" />
            </div>
          </div>
        </div>
        <!-- <div class="second">
              <p class="bold-title">百里杜鹃生态茶初见成效</p>
              <p class="tougao">2020-10-10 15:25:15  来源：百家号、潇湘晨报   作者：佚名  点击：3808  投稿</p>
            </div>
            <div class="third">
              <p class="jiesao">茶产业作为百里杜鹃的重要产业之一，是百里杜鹃结合旅游开发着重打造的生态绿色产业</p>
            </div> -->
        <div class="four" v-html="content(item.content)"></div>
        <!-- <div class="check-detail">查看详情>>></div> -->
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="cai-like" v-if="likes">
      <div class="sift-btn">
        <div class="left">
          <img src="../assets/image/tea5.png" alt="" class="thumb" />
          <p class="btn-title">精选茶叶</p>
        </div>
        <div class="right">
          <img src="../assets/image/tea5.png" alt="" class="thumb" />
          <p class="btn-title">精选茶叶</p>
        </div>
      </div>
      <div class="tea-goods-list">
        <div class="tea-group" v-for="(item, index) in teaGoods" :key="index">
          <div class="group-top">
            <img :src="Config_ysy.img_url + item.images[0]" alt="" />
            <!-- <p>
                      <span>{{item.price}}</span>
                      <span>{{item.coupon}}</span>
                    </p> -->
          </div>
          <div class="group-bottom">
            <div class="group-title">
              {{ item.goods_name }}
            </div>
            <div class="group-biaoqia">
              <p
                class="tip-title"
                v-for="(tips, index) in item.label"
                :key="index"
              >
                {{ tips }}
              </p>
            </div>
            <div class="group-price">
              <span>￥{{ item.present_price }}</span>
            </div>
            <!-- <div class="groub-active" >
                        <p class="wz" v-for="(actives,index) in item.biao" :key="index">{{actives.bao}}</p>
                    </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-tab">
      <div
        :class="
          item.center == true
            ? 'bottom-tab-item-center'
            : 'bottom-tab-item-sider'
        "
        v-for="(item, index) in bottomTabList"
        :key="index"
        @click="changeTabs(item.id)"
      >
        <img
          v-if="curTab == item.id"
          class="first-img"
          :src="item.imgOn"
          alt=""
        />
        <img
          v-if="curTab != item.id"
          class="first-img"
          :src="item.imgOff"
          alt=""
        />
        <span
          :class="curTab == item.id ? 'text-position text-on' : 'text-position'"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import {
  bannerData,
  getClassify,
  goodsData,
  teaData,
  onlyData,
  getDetailData,
  getArticleData,
  getLikeData,
} from "../sever/request";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      tabBars: [{ name: "精选" }, { name: "猜你喜欢" }],
      scrollinto: "",
      tabIndex: 0,
      banner: [],
      classifyList: [],
      goodsList: [],
      teaList: [],
      detailList: [],
      onlys: [],
      token: "123",
      articleList: null,
      sift: true,
      likes: false,
      teaGoodsList: [],
      teaGoods: [
        // {thumb:require('../assets/image/tea7.png'),price:'99.00',coupon:'领劵99-20',shopName:'大优惠超值满减限时活动早春抢新品绿茶满减活动限时早春抢新新品绿茶',biao:[{bao:'满99减20'},{bao:'包邮'}],tip:[{tipimg:'限时抢购'}]},
      ],

      page: 1,
      limit: 10,

      curTab: 1,
      bottomTabList: [
        {
          id: 1,
          name: "首页",
          imgOff: require("../assets/image/home1.png"),
          imgOn: require("../assets/image/home.png"),
          url: "/pages/center/ai",
        },
        {
          id: 2,
          name: "商城",
          imgOff: require("../assets/image/mall1.png"),
          imgOn: require("../assets/image/mall.png"),
          // url: "/pages/center/cate",
        },
        {
          id: 3,
          name: "任务",
          imgOff: require("../assets/image/task1.png"),
          imgOn: require("../assets/image/task.png"),
          // url: "/pages/center/center",
          center: true,
        },
        {
          id: 4,
          name: "课程",
          imgOff: require("../assets/image/cousure1.png"),
          imgOn: require("../assets/image/cousure.png"),
          // url: "/pages/center/cart",
        },
        {
          id: 5,
          name: "我的",
          imgOff: require("../assets/image/mine1.png"),
          imgOn: require("../assets/image/mine.png"),
          // url: "/pages/center/user",
        },
      ],
    };
  },
  mounted() {
    this.getBanner();
    this.getClassifys();
    this.getGoodsData();
    this.getTeaData();
    this.getOnly();
    this.getDetailsList();
    this.getArticleList();
    this.getLikeDatas();
  },
  methods: {
    // 切换选项卡
    changeTab(index) {
      if (this.tabIndex === index) {
        return;
      }
      this.tabIndex = index;
      this.sift = !this.sift;
      this.likes = !this.likes;
      // this.scrollinto = "tab" + index;
    },

    changeTabs(id) {
      this.curTab = id;
      if (id == 2) {
        console.log("运行了");
        uni.navigateTo({
          url: "/pages/center/cate",
        });
      } else if (id == 3) {
        uni.navigateTo({
          url: "/pages/center/center",
        });
      } else if (id == 4) {
        uni.navigateTo({
          url: "/pages/center/cart",
        });
      } else if (id == 5) {
        uni.navigateTo({
          url: "/pages/center/user",
        });
      }
    },
    // 轮播图
    getBanner() {
      bannerData({
        token: this.token,
      }).then((res) => {
        if (res.data.code === 1) {
          this.banner = res.data.data;
        }
      });
    },

    // 分类
    getClassifys() {
      getClassify({}).then((res) => {
        if (res.data.code == 1) {
          this.classifyList = res.data.data;
          console.log(res.data.data);
        }
      });
    },
    // 官方推荐
    getGoodsData() {
      goodsData({
        token: this.token,
      }).then((res) => {
        if (res.data.code === 1) {
          this.goodsList = res.data.data;
        }
      });
    },
    // 限时精品
    getTeaData() {
      teaData({
        token: this.token,
      }).then((res) => {
        if (res.data.code === 1) {
          this.teaList = res.data.data;
        }
      });
    },
    getOnly() {
      onlyData({
        token: this.token,
      }).then((res) => {
        if (res.data.code==1) {
          this.onlys = res.data.data;
        }
      });
    },
    // 显示精品
    getDetailsList() {
      getDetailData({
        token: this.token,
      }).then((res) => {
        if (res.data.code == 1) {
          this.detailList = res.data.data;
        }
      });
    },
    //文章
    getArticleList() {
      getArticleData({
        token: this.token,
      }).then((res) => {
        if (res.data.code === 1) {
          this.articleList = res.data.data;
        }
      });
    },

    //猜你喜欢

    getLikeDatas() {
      getLikeData({
        token: this.token,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        if (res.data.code === 1) {
          this.teaGoods = res.data.data;
        }
      });
    },

    content(str) {
      if (str.indexOf("width") != -1) {
        return str.replace(/width/g, "");
        // return str.split('style')[0]+"><br></div>";
      }
      return str;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  overflow-y: scroll;
  width: 10rem;
  .header {
    width: 100%;
    height: 4.906667rem;
    background-color: #40c268;
    opacity: 0.82;
    padding-top: 0.5rem;
    .head-search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0 0.133333rem 0 0.266667rem;
      .orientation {
        .dw {
          width: 0.346667rem;
          height: 0.506667rem;
          padding-left: 0.186667rem;
        }
        .wenzi {
          font-size: 0.186667rem;
          color: #f1f3ed;
          font-weight: bold;
        }
      }
      .inp-box {
        display: flex;
        justify-content: flex-start;
        margin-left: 0.16rem;
        width: 7.546667rem;
        height: 0.666667rem;
        border-radius: 0.2rem;
        background-color: #ffffff;
        .suo {
          width: 0.4rem;
          height: 0.4rem;
          padding-left: 0.2rem;
          padding-top: 0.133333rem;
        }
        input {
          width: 6.16rem;
          border: none;
          border-radius: 0.2rem;
          padding-left: 0.066667rem;
        }
        .search {
          width: 1.266667rem;
          height: 0.666667rem;
          display: inline-block;
          border-left: 0.026667rem solid #000000;
          color: #c6c9c7;
          font-size: 0.346667rem;
          text-align: center;
          line-height: 0.666667rem;
        }
      }
      .cart-box {
        padding-left: 0.133333rem;
        img {
          width: 0.44rem;
          height: 0.346667rem;
        }
      }
      .news {
        margin-left: 0.133333rem;
        img {
          width: 0.4rem;
          height: 0.346667rem;
        }
      }
    }
    .tab-div {
      margin-top: 1rem;
      margin-left: 0.266667rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      .row-item {
        margin-left: 0.533333rem;
        cursor: pointer;
        .font-md {
          color: #ffffff;
          font-size: 0.373333rem;
        }
        .text-color {
          color: #ddecc9;
          font-size: 0.48rem;
          border-bottom: 1px solid #ddecc9;
          padding-bottom: 0.04rem;
        }
      }
      .row-item:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  // 精选样式样式
  .sift {
    .swiper-box {
      margin: -1.866667rem 0.466667rem 0 0.466667rem;
      width: 9.066667rem;
      height: 3.733333rem;
      border-radius: 0.2rem;
      .banner-img {
        img {
          width: 9.066667rem;
          height: 3.733333rem;
          border-radius: 0.2rem;
        }
      }
    }
    .navtagor {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      // border-bottom: .026667rem solid #dadada;
      .classify-box {
        margin-top: 0.266667rem;
        width: 20%;
        text-align: center;
        .tea-img {
          width: 1.013333rem;
          height: 1.013333rem;
        }
        .tea-name {
          font-size: 0.24rem;
          color: #838282;
        }
      }
    }
    .bach {
      width: 10rem;
      margin-top: 0.266667rem;
      border-top: 2px solid #dadada;
      .title-more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.453333rem 0.333333rem 0 0.333333rem;
        .tuijie {
          font-size: 0.4rem;
          color: #888787;
        }
        .more {
          font-size: 0.32rem;
          color: #888787;
        }
      }
    }
    .tea-list {
      margin: 0.453333rem 0.453333rem 0 0.453333rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .goods-tea {
        width: 4.293333rem;
        height: 4.533333rem;
        margin-bottom: 0.2rem;
        border-radius: 0.133333rem;
        box-shadow: 0px 0px 4px 1px #230d07;
        opacity: 0.9;
        .goods-img {
          width: 4.293333rem;
          height: 2.8rem;
          border-radius: 0.133333rem;
        }
        .goods-title {
          font-size: 0.48rem;
          font-weight: bold;
          color: #565656;
          padding-left: 0.066667rem;
          padding-top: 0.066667rem;
        }
        .section {
          font-size: 0.24rem;
          color: #7c7b7b;
          width: 2.666667rem;
          padding-left: 0.066667rem;
          padding-top: 0.066667rem;
        }
        .money {
          font-size: 0.346667rem;
          color: #8d5757;
          float: right;
          margin-right: 0.066667rem;
        }
      }
    }
    .limit {
      margin-top: 0.8rem;
      .limit-head {
        position: relative;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
        i {
          display: block;
          height: 2px;
          background: #dadada;
          position: absolute;
          top: 0.9rem;
          width: 100%;
        }
        .jinxuan {
          display: inline-block;
          font-size: 0.4rem;
          font-weight: bold;
          color: #888787;
          background: #fff;
          padding: 0 0.875rem;
          text-align: center;
          margin: 0 auto;
          position: relative;
          z-index: 2;
        }
      }
      .limit-goods {
        display: flex;
        justify-content: flex-start;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        .limit-tea {
          width: 2.266667rem;
          height: 2.266667rem;
          margin-right: 0.84rem;
          img {
            width: 2.266667rem;
            height: 2.266667rem;
          }
        }
      }
      .bj {
        width: 10rem;
        height: 1.56rem;
        margin-top: -0.866667rem;
        background: url("../assets/image/tuoyuan.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .rhyme {
      margin-top: 0.72rem;
      padding: 0 0.44rem;
      .rhy-img {
        img {
          width: 9.04rem;
          height: 4.053333rem;
          border-radius: 0.133333rem;
        }
      }
      .detail {
        width: 9.013333rem;
        height: 2.04rem;
        box-shadow: 0px 0px 0.08rem 0px rgba(51, 44, 42, 0.59);
        border-radius: 0.133333rem;
        border: solid 1px #a7a7a7;
        opacity: 0.85;
        display: flex;
        justify-content: flex-start;
        margin-top: 0.266667rem;
        .left {
          .left-title {
            padding-top: 0.186667rem;
            padding-left: 0.16rem;
            font-size: 0.48rem;
            font-weight: bold;
            color: #565656;
          }
          .left-money {
            padding-left: 0.16rem;
            padding-top: 0.213333rem;
            font-size: 0.4rem;
            font-weight: bold;
            color: #995b5b;
          }
          .left-section {
            width: 5.333333rem;
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 0.24rem;
            color: #7c7b7b;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-left: 0.16rem;
          }
        }
        .right {
          width: 3.026667rem;
          height: 1.72rem;
          padding: 0.16rem 0.16rem 0.16rem 0.2rem;
          img {
            width: 3.026667rem;
            height: 1.72rem;
          }
        }
      }
    }
    .tea-detail {
      width: 9.013333rem;
      margin: 0.32rem 0.6rem 1.066667rem 0.386667rem;
      box-shadow: 0px 0px 0.08rem 0px rgba(51, 44, 42, 0.59);
      border-radius: 0.133333rem;
      border: solid 1px #a7a7a7;
      opacity: 0.85;
      margin: 0.32rem;
      .first {
        display: flex;
        justify-content: flex-start;
        .first-left {
          margin: 0.373333rem 0 0 0.1rem;

          img {
            width: 4.906667rem;
            height: 3.493333rem;
          }
        }
        .first-right {
          margin-left: 0.36rem;
          margin-top: 0.493333rem;
          .right-top {
            display: flex;
            justify-content: flex-start;

            img {
              width: 1.6rem;
              height: 1.6rem;
            }
            .de {
              margin-left: 0.16rem;
            }
          }
          .right-bottom {
            margin-top: 0.133333rem;
            img {
              width: 3.4rem;
              height: 1.746667rem;
              border-radius: 0.133333rem;
            }
          }
        }
      }
      // .second{
      //   margin:.4rem  0 0 .453333rem;
      //   .bold-title{
      //     font-size: .48rem;
      //     font-weight: bold;
      //     color: #565454;
      //   }
      //   .tougao{
      //     font-size: .146667rem;
      //     font-weight: bold;
      //     color: #a4a4a4;
      //   }
      // }
      // .third{
      //   margin: .306667rem  0  0  .453333rem;
      //   width: 6.533333rem;
      //   height: .733333rem;
      //   .jiesao{
      //     width: 100%;
      //     height: 100%;
      //     font-size: .32rem;
      //     color: #6c6969;
      //     font-weight: bold;
      //     line-height: .4rem;
      //   }
      // }
      .four {
        margin: 0.213333rem 0.133333rem 0.533333rem 0.133333rem;
        .xq {
          font-size: 0.16rem;
          color: #6c6969;
          line-height: 0.4rem;
        }
      }
      .check-detail {
        float: right;
        margin-top: 0.08rem;
        margin-right: 0.173333rem;
        padding-bottom: 0.4rem;
        font-size: 0.186667rem;
        color: #a1a0a0;
      }
    }
  }

  // 猜你喜欢样式

  .cai-like {
    .sift-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -1rem;
      .left {
        margin-right: 0.333333rem;
      }
      .right {
        margin-left: 0.333333rem;
      }
      .left,
      .right {
        z-index: 1;
        text-align: center;
        .thumb {
          width: 3.96rem;
          height: 2.32rem;
          border-radius: 0.133333rem;
        }
        .btn-title {
          font-size: 0.32rem;
          color: #747474;
          margin-top: 0.266667rem;
        }
      }
    }
    .tea-goods-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 0.266667rem 0.133333rem 0 0.133333rem;
      background-color: #f6f6f6;
      .tea-group {
        width: 49%;
        border-radius: 0.266667rem;
        border: solid 0.013333rem #9a9a9a;
        opacity: 0.84;
        background-color: #ffffff;
        margin-bottom: 0.106667rem;
        .group-top {
          margin: 0.266667rem 0.24rem;
          width: 4.26667rem;
          height: 4.426667rem;
          border-radius: 0.133333rem;
          img {
            width: 4.26667rem;
            height: 4.426667rem;
            border-radius: 0.133333rem;
          }
        }
        .group-bottom {
          position: relative;
          margin: 0 0.266667rem;
          .group-title {
            width: 4.44rem;
            height: 0.7rem;
            font-size: 0.26rem;
            line-height: 0.32rem;
            font-weight: bold;
            color: #141414;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            white-space: normal;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .group-biaoqia {
            position: absolute;
            top: .966667rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .tip-title {
              min-width: 0.426667rem;
              height: 0.3rem;
              text-align: center;
              line-height: 0.3rem;
              background-color: #c03144;
              font-size: 0.24rem;
              padding: 0.053333rem 0.133333rem;
              font-family: HYh3gj;
              font-weight: normal;
              font-stretch: normal;
              color: #f5f5f5;
              margin-left: 0.266667rem;
            }
            .tip-title:nth-child(1) {
              margin-left: 0;
            }
          }
          .group-price {
            margin-top: 0.866667rem;
            font-size: 0.4rem;
            color: #c03144;
            margin-bottom: .2rem;
          }

          .groub-active {
            margin-top: 0.133333rem;
            margin-bottom: 0.2rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .wz {
              min-width: 0.586667rem;
              height: 0.24rem;
              border: solid 1px #e17e2e;
              margin-left: 0.266667rem;
              font-size: 0.24rem;
              line-height: 0.24rem;
              text-align: center;
              color: #e0914f;
              padding: 0.053333rem 0.133333rem;
            }
            .wz:nth-child(1) {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
  //  底部导航
  .bottom-tab {
    position: fixed;
    z-index: 3000;
    background-image: url(../assets/image/tab.png);
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 1.066667rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-tab-item-center {
      width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -0.133333rem;
      .first-img {
        width: 1.333333rem;
        height: 1.333333rem;
        margin-top: -0.8rem;

        border-radius: 50%;
      }
      .text-position {
        margin-top: 0.066667rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #b49828;
      }
    }
    .bottom-tab-item-sider {
      width: 19%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -0.533333rem;
      .first-img {
        width: 0.933333rem;
        height: 0.933333rem;
      }
      .text-position {
        margin-top: 0.066667rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #b49828;
      }
    }
  }
}
</style>
